    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
</head>

<body style="font-size: 40px;">
    <br>
    <br>
    <form action="" style="border: 1px solid rgb(18, 240, 88); padding: 50px; border-radius: 10px;">
        <label for="nickname">昵称:</label>
        <input type="text" id="nickname" value="chary">
        <span style="margin-left: 20px;">头像</span>
        <input type="file" id="avatarInput" accept="image/*">
        <img id="avatarPreview" src="" alt="头像预览" style="width: 100px; height: 100px; margin-left: 20px;">
        <br>
        爱好：
        <input type="checkbox" name="hobbies" value="游泳" id="hobby-swimming">游泳
        <input type="checkbox" name="hobbies" value="游戏" id="hobby-game">游戏
        <input type="checkbox" name="hobbies" value="赚钱" id="hobby-money">赚钱
        <input type="checkbox" name="hobbies" value="登山" id="hobby-climbing">登山
        <br>
        性别:
        <input type="radio" name="sex" id="male" value="男">男
        <input type="radio" name="sex" id="female" checked value="女">女
        <input type="radio" name="sex" id="helicopter" value="武装直升机">武装直升机
        <br>
        生日：
        <input type="date" name="birthday" id="birthday">
        <input type="datetime-local" name="datetime" id="datetime">
        <br>
        邮箱：<input type="email" name="email" id="email" placeholder="输入邮箱格式">
        <br>
        存款：<input type="number" name="deposit" id="deposit" step="10" placeholder="请填入整数">
        <br>
        籍贯：
        <select name="nativePlace" id="nativePlace">
            <option value="四川">四川</option>
            <option value="北京">北京</option>
            <option value="贵州">贵州</option>
            <option value="上海">上海</option>
            <option value="深圳">深圳</option>
            <option value="广州">广州</option>
            <option value="杭州">杭州</option>
            <option value="西安">西安</option>
            <option value="南京">南京</option>
            <option value="武汉">武汉</option>
            <option value="重庆">重庆</option>
            <option value="国外">国外</option>
        </select>
        <button type="button" onclick="saveAllData()">保存</button>
    </form>

    <script>
        window.onload = function () {
            const savedNickname = localStorage.getItem('nickname');
            if (savedNickname) {
                document.getElementById('nickname').value = savedNickname;
            }

            const savedAvatar = localStorage.getItem('avatar');
            if (savedAvatar) {
                document.getElementById('avatarPreview').src = savedAvatar;
            }

            const avatarInput = document.getElementById('avatarInput');
            avatarInput.addEventListener('change', function (e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function (event) {
                        document.getElementById('avatarPreview').src = event.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            });

            const savedHobbies = JSON.parse(localStorage.getItem('hobbies'));
            if (savedHobbies) {
                const hobbyCheckboxes = document.querySelectorAll('input[name="hobbies"]');
                hobbyCheckboxes.forEach(checkbox => {
                    checkbox.checked = savedHobbies.includes(checkbox.value);
                });
            }

            const savedSex = localStorage.getItem('sex');
            if (savedSex) {
                const sexRadios = document.querySelectorAll('input[name="sex"]');
                sexRadios.forEach(radio => {
                    radio.checked = radio.value === savedSex;
                });
            }

            const savedBirthday = localStorage.getItem('birthday');
            if (savedBirthday) {
                document.getElementById('birthday').value = savedBirthday;
            }

            const savedDatetime = localStorage.getItem('datetime');
            if (savedDatetime) {
                document.getElementById('datetime').value = savedDatetime;
            }

            const savedEmail = localStorage.getItem('email');
            if (savedEmail) {
                document.getElementById('email').value = savedEmail;
            }

            const savedDeposit = localStorage.getItem('deposit');
            if (savedDeposit) {
                document.getElementById('deposit').value = savedDeposit;
            }

            const savedNativePlace = localStorage.getItem('nativePlace');
            if (savedNativePlace) {
                document.getElementById('nativePlace').value = savedNativePlace;
            }
        };

        function saveAllData() {
            const nicknameInput = document.getElementById('nickname');
            const newNickname = nicknameInput.value;
            localStorage.setItem('nickname', newNickname);

            const avatarInput = document.getElementById('avatarInput');
            const file = avatarInput.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (event) {
                    const avatarDataUrl = event.target.result;
                    localStorage.setItem('avatar', avatarDataUrl);
                };
                reader.readAsDataURL(file);
            }

            const hobbyCheckboxes = document.querySelectorAll('input[name="hobbies"]');
            const selectedHobbies = [];
            hobbyCheckboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    selectedHobbies.push(checkbox.value);
                }
            });
            localStorage.setItem('hobbies', JSON.stringify(selectedHobbies));

            const sexRadios = document.querySelectorAll('input[name="sex"]');
            sexRadios.forEach(radio => {
                if (radio.checked) {
                    localStorage.setItem('sex', radio.value);
                }
            });

            const birthdayInput = document.getElementById('birthday');
            const newBirthday = birthdayInput.value;
            localStorage.setItem('birthday', newBirthday);

            const datetimeInput = document.getElementById('datetime');
            const newDatetime = datetimeInput.value;
            localStorage.setItem('datetime', newDatetime);

            const emailInput = document.getElementById('email');
            const newEmail = emailInput.value;
            localStorage.setItem('email', newEmail);

            const depositInput = document.getElementById('deposit');
            const newDeposit = depositInput.value;
            localStorage.setItem('deposit', newDeposit);

            const nativePlaceSelect = document.getElementById('nativePlace');
            const newNativePlace = nativePlaceSelect.value;
            localStorage.setItem('nativePlace', newNativePlace);

            alert('所有信息已保存');
        }
    </script>
</body>

</html>    